import { getMenuList } from "@/api/user";
import { UserInfo } from "@/types/global";
import { getLocalStorage } from "@/utils/utils";
import { defineStore } from "pinia";

interface AppState {
  menusTree: any[]; // 路由列表
  isRoutesLoaded: boolean; // 是否已经加载过路由
  userInfo: UserInfo; // 用户信息
}

export const useAppStore = defineStore("app", {
  // 相当于data
  state: (): AppState => {
    return {
      menusTree: [],
      isRoutesLoaded: false,
      userInfo: getLocalStorage("userInfo") as UserInfo
    };
  },
  // 相当于计算属性
  getters: {},
  // 相当于vuex的 mutation + action，可以同时写同步和异步的代码
  actions: {
    // 请求菜单、路由数据
    async getMenuList() {
      getMenuList().then((res) => {
        this.menusTree = res.data as any[];
        this.isRoutesLoaded = true;
      });
    },

    // 保存用户信息
    async saveUserInfo(userInfo: UserInfo) {
      this.userInfo = userInfo;
    }
  },
  /**
   * @desc 只有当状态发生改变时，才进行持久化
   */
  // 所有数据持久化
  // persist: true,
  // 按需持久化
  persist: {
    // 修改存储中使用的键名称，默认为当前 Store的 id
    key: "userInfo",
    // 修改为 sessionStorage，默认为 localStorage
    // storage: window.sessionStorage,
    // 部分持久化状态的点符号路径数组，[]意味着没有状态被持久化(默认为undefined，持久化整个状态)
    paths: ["userInfo"] // //指定 state 中哪些数据需要被持久化。[] 表示不持久化任何状态，undefined 或 null 表示持久化整个 state
  }
});
